<template>
  <div>
    <el-form label-width="80px">
      <el-row :gutter="20">
        <el-col :xs="isDesktop ? 12 : 24" :sm="8" :md="6">
          <el-form-item label="年度">
            <el-select
              multiple
              collapse-tags
              v-model="filter.year"
              size="small"
              style="width: 100%"
              placeholder="不限"
            >
              <el-option
                v-for="item in yearsList"
                :key="item"
                :label="item + '年度'"
                :value="item"
              ></el-option>
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :xs="isDesktop ? 12 : 24" :sm="8" :md="6">
          <el-form-item label="周期">
            <el-select
              multiple
              collapse-tags
              v-model="filter.cycle"
              size="small"
              style="width: 100%"
              placeholder="不限"
            >
              <el-option
                v-for="item in cycleList"
                :key="item"
                :label="'第' + item + '轮'"
                :value="item"
              ></el-option>
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :xs="isDesktop ? 12 : 24" :sm="8" :md="6">
          <el-form-item label="练习类型">
            <el-select
              multiple
              collapse-tags
              v-model="filter.type"
              size="small"
              style="width: 100%"
              placeholder="不限"
            >
              <el-option label="年度复训" :value="1"></el-option>
              <el-option label="专项训练" :value="2"></el-option>
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :xs="isDesktop ? 12 : 24" :sm="8" :md="6">
          <el-form-item label="练习名称">
            <el-select
              v-model="filter.title"
              multiple
              collapse-tags
              size="small"
              style="width: 100%"
              placeholder="不限"
            >
              <el-option
                v-for="item in exercisesList"
                :key="item.number"
                :label="item.title"
                :value="item.title"
              >
                <!-- <span style="float: left">{{ item.title }}</span>
                <span style="float: right; color: #8492a6; font-size: 12px">{{ item.year }}/{{ item.office }}</span> -->
              </el-option>
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :xs="isDesktop ? 12 : 24" :sm="8" :md="6">
          <el-form-item label="适用范围">
            <el-select
              v-model="filter.office"
              multiple
              collapse-tags
              size="small"
              style="width: 100%"
              placeholder="不限"
            >
              <el-option
                v-for="item in params.userAttribs.exerciseOffice"
                :key="item"
                :label="item"
                :value="item"
              ></el-option>
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :xs="isDesktop ? 12 : 24" :sm="8" :md="6">
          <el-form-item label="学员科室">
            <el-select
              v-model="filter.traineeOffice"
              multiple
              collapse-tags
              size="small"
              style="width: 100%"
              placeholder="不限"
            >
              <el-option
                v-for="item in params.userAttribs.office"
                :key="item"
                :label="item"
                :value="item"
              ></el-option>
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :xs="isDesktop ? 12 : 24" :sm="8" :md="6">
          <el-form-item label="学员班组">
            <el-select
              v-model="filter.traineeGroup"
              multiple
              collapse-tags
              size="small"
              style="width: 100%"
              placeholder="不限"
            >
              <el-option
                v-for="item in params.userAttribs.group"
                :key="item"
                :label="item"
                :value="item"
              ></el-option>
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :xs="isDesktop ? 12 : 24" :sm="8" :md="6">
          <el-form-item label="学员姓名">
            <el-select
              v-model="filter.traineeNumber"
              multiple
              collapse-tags
              clearable
              size="small"
              style="width: 100%"
              placeholder="不限"
            >
              <el-option
                v-for="item in userList"
                :key="item.number"
                :label="item.name"
                :value="item.number"
              ></el-option>
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :xs="isDesktop ? 12 : 24" :sm="8" :md="6">
          <el-form-item label="教员科室">
            <el-select
              v-model="filter.coachOffice"
              multiple
              collapse-tags
              size="small"
              style="width: 100%"
              placeholder="不限"
            >
              <el-option
                v-for="item in params.userAttribs.office"
                :key="item"
                :label="item"
                :value="item"
              ></el-option>
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :xs="isDesktop ? 12 : 24" :sm="8" :md="6">
          <el-form-item label="教员姓名">
            <el-select
              v-model="filter.coachNumber"
              multiple
              collapse-tags
              clearable
              size="small"
              style="width: 100%"
              placeholder="不限"
            >
              <el-option
                v-for="item in userList"
                :key="item.number"
                :label="item.name"
                :value="item.number"
              ></el-option>
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :xs="isDesktop ? 12 : 24" :sm="8" :md="6">
          <el-form-item label="通过">
            <el-select
              v-model="filter.pass"
              multiple
              size="small"
              style="width: 100%"
              placeholder="不限"
            >
              <el-option label="是" value="是"></el-option>
              <el-option label="否" value="否"></el-option>
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :xs="isDesktop ? 12 : 24" :sm="8" :md="6">
          <el-form-item label-width="0px">
            <div style="text-align: center">
              <el-button type="primary" size="small" @click="doQuery"
                >检索</el-button
              >
              <el-button size="small">清空</el-button>
            </div>
          </el-form-item>
        </el-col>
      </el-row>
    </el-form>
    <!-- <el-alert
      type="info"
      title="无需筛选的项目请留空"
      :closable="false"
    ></el-alert> -->
    <div
      style="color: #aaa; font-size: 12px; padding: 0 12px; text-align: center"
    >
      <i class="el-icon-info" style="padding-right: 3px"></i
      >无需筛选的项目请留空
    </div>
  </div>
</template>

<script>
export default {
  name: "queryPanel",
  data() {
    return {
      page: 0,
      filter: {
        year: [],
        pass: [],
        title: [],
        cycle: [],
        type: [],
        office: [],
        traineeOffice: [],
        traineeGroup: [],
        traineeNumber: [],
        coachOffice: [],
        coachNumber: [],
      },
    };
  },
  computed: {
    pageList() {
      if (this.queriedRecords && this.queriedRecords.length > 0) {
        let pages = [];
        for (let i = 0; i < this.queriedRecords.length; i += 50) {
          pages.push({
            start: i,
            end:
              i + 49 < this.queriedRecords.length
                ? i + 49
                : this.queriedRecords.length - 1,
          });
        }
        return pages;
      }
      return [];
    },
    isDesktop() {
      return this.$store.getters.isDesktop;
    },
    exercisesList() {
      return this.$store.state.existedRecordTitle;
      // let arr = this.$store.state.existedRecordTitle;
      // const res = new Map();
      // return arr
      //   .filter((item) => !res.has(item.title) && res.set(item.title, 1))
      //   .sort((a, b) => b.title - a.title);
    },
    params() {
      return this.$store.state.params;
    },
    userList() {
      return this.$store.state.userList;
    },
    yearsList() {
      let list = new Array();
      for (let i = 0; i >= -2; i--) {
        list.push(new Date().getFullYear() + i);
      }
      return list;
    },
    cycleList() {
      let list = new Array();
      for (let i = 1; i <= 10; i++) {
        list.push(i);
      }
      return list;
    },
    queriedRecords() {
      return this.$store.state.queriedRecords;
    },
  },
  methods: {
    doQuery() {
      this.$emit("loading", true);
      console.log("filter:", this.filter);
      this.$store
        .dispatch("queryRecords", this.filter)
        .then(() => {
          this.$emit("loading", false);
          if (this.queriedRecords.length > 0) {
            this.$notify.success({
              title: "查询成功",
              message: `查询到 ${this.queriedRecords.length} 条记录`,
            });
            this.$emit("success");
          } else {
            this.$notify.warning({
              title: "查询成功",
              message: `没有查询到记录`,
            });
          }
        })
        .catch((error) => {
          this.$notify.error({
            title: "查询失败",
            message: error.message,
          });
        });
    },
  },
  created() {
    this.$store.dispatch("getExistedRecordTitle");
  },
};
</script>

<style></style>
>
